              let pageSize=2;//页面数据默认多少条一页
              let stunamearr=[];//学生下拉菜单
              let dormarr = [];//宿舍下拉菜单

              //创建表格th
              let table_div = document.querySelector("#table_div");
              let table = document.createElement("table");
        
              table.setAttribute("id", "table")
              table_div.appendChild(table); //会覆盖原来的样式 
              table.className = "table table-hover table-bordered"; // table.classList
              let thead = document.createElement("thead");
              table.appendChild(thead);
              let tbody = document.createElement("tbody");
              table.appendChild(tbody);
              let tr = document.createElement("tr");
              thead.appendChild(tr);

              let titles = ["<input name='cb_select_all' type='checkbox'>","序号", "姓名", "性别", "电话", "宿舍楼", "寝室", "操作"];
              titles.forEach(function (value, index) {
                let th = document.createElement("th");
                tr.appendChild(th);
                th.innerHTML = value; // th.className = "text-center"; 
                th.classList.add("text-center"); // th.style.css属性 = css属性值，一般不用
              });

              //创建对象
              function stu(id, name, gender, phone, dorm, dormroom) {
                obj = new Object();
                obj.id = id;
                obj.name = name;
                obj.gender = gender;
                obj.phone = phone;
                obj.dorm = dorm;
                obj.dormroom = dormroom;
                return obj;
              }
              let zhangsan = new stu(1, "张三", "男", "123456789", "412", "109");
              let lisi = new stu(2, "李四", "男", "123456798", "412", "108");
              let wangwu = new stu(3, "王五", "男", "123456233", "411", "108");
              let wangwe = new stu(4, "王二", "男", "123456233", "411", "108");
              stulist = [zhangsan, lisi, wangwu, wangwe];

            //更新菜单(重新插入数组中的元素)
              function updateTable(array) {
                if (!Array.isArray(array)) {
                    throw new Error("array 必须是一个数组");
                }
                array.forEach(function (value, index) {
                    stunamearr.push(value.name);
                    dormarr.push(value.dorm);
                    tr = document.createElement("tr");
                    //每次更新都刷新该行是第几行
                    tr.index = index;
                    //定义data-id为该数组的ID
                    tr["data-id"] = value.id;
                    tbody.appendChild(tr);
                    let tds = `
            <td><input size=6  id="${value.id}" name="cb_select" type="checkbox"></td>
            <td><span>${value.id}</span></td>
            <td editable><span>${value.name}</span><input size=6 type="text" name="name"
            value="${value.name}" hidden></td>
            <td editable><span>${value.gender}</span>
            <input size=6 type="text" hidden name="gender" value="${value.gender}"></td>
            <td editable>
            <span>${value.phone}</span>
            <input size=6 type="text" name="phone"hidden value="${value.phone}"></td>
            <td editable>
            <span>${value.dorm}</span>
            <input size=6 type="text" name="dorm"hidden value="${value.dorm}">
            </td>
            <td editable>
            <span>${value.dormroom}</span>
            <input size=6 type="text" hidden name="dormroom" value="${value.dormroom}">
            </td>
            <td>
            <button type="button" class="btn btn-info btn-sm" onclick="edit(event)">编辑</button>
            <button type="button" class="btn btn-danger btn-sm" onclick="del(event)">删除</button>
            </td>
            `;
                    tr.innerHTML = tds;
                });
                let tds = document.querySelectorAll("tbody tr td");
                // console.log(tds);
                Array.from(tds).forEach(function (value) {
                    //不会覆盖原来的样式
                    value.classList.add("text-center");
                });
            }

            updateTable(stulist);


            //添加行
            function insert(event) {
                let addTr = `
            <tr>
            <td><input type="checkbox"></td>
            <td></td>
            <td><input size=6 type="text" name="name" placeholder="姓名"></td>
            <td><input size=6 type="text" name="gender" placeholder="性别"></td>
            <td><input size=6 type="text" name="phone" placeholder="电话"></td>
            <td><input size=6 type="text" name="dorm" placeholder="宿舍楼"></td>
            <td><input size=6 type="text" name="dormroom" placeholder="寝室"></td>
            <td>
            <button type="button" class="btn btn-info btn-sm" onclick="save(event)">保存</button>
            <button type="button" class="btn btn-danger btn-sm" onclick="cancel(event)">取消</button>
            </td>
            </tr>
            `;
                table.querySelector("tbody").insertAdjacentHTML("afterend", addTr);
            }
            

            //编辑函数
            function edit(event) {
                let self = event.target;
                let editTr = self.parentNode.parentNode;
                let tds = editTr.querySelectorAll("td[editable]");
                console.log(tds);
                if (self.innerText == "编辑") {
                    tds.forEach(value => {
                        value.querySelector("span").hidden = true;
                        value.querySelector("input").hidden = false;
                    });
                    self.innerText = "保存";

                //当按钮中是保存的时候执行以下函数
                } else {
                    save(event, newObj => {
                        //editTr = self.parentNode.parentNode;选中的行
                        // ["data-id"]提取行的自定义id属性
                        let dataId = editTr["data-id"];
                        // console.log(`dataId: ${dataId}`);
                        let editIndex;
                        //提取每个学生的ID，如果跟编辑的行ID一样就返回是该学生数组的第几个
                        stulist.forEach((value, index) => {
                            if (value.id == dataId) {
                                editIndex = index;
                            }
                        });
                        //创建新的对象，更换对象
                        let editObj = stulist[editIndex];
                        newObj.id = editObj.id;
                        //删除(位置，1为删除，替换的内容)
                        stulist.splice(editIndex, 1, newObj);
                    });
                 
                }
            }

            //保存
            function save(event, callback) {
                let self = event.target;
                let editTr = self.parentNode.parentNode;
                let inputs = editTr.querySelectorAll("input");
                // let newObj = {
                // name: inputs[1].value,
                // price: input[2].value
                // };
                let newObj = {}; //要保存的数据内容
                inputs.forEach(value => {
                    console.log(value);
                    if (value.type != "checkbox") {
                        if (value.type == "number") {
                            newObj[value.name] = value.valueAsNumber;
                        } else if (value.type == "date") {
                            newObj[value.name] = value.valueAsDate;
                        } else {
                            newObj[value.name] = value.value;
                        }
                    }
                });
                if (callback) {
                    callback(newObj);
                } else {
                    newObj.id = getInsertId(stulist);
                    //保存到数组中
                    stulist.push(newObj);
                }
                //刷新表格
                pagination(stulist, 1);
            }

            function add(event) {
                console.log("add");
                let self = event.target;
                let span = self.previousElementSibling;
                // console.log(span);
                let tr = self.parentNode.parentNode;
                let count = parseInt(span.innerText) + 1;
                span.innerText = count;
                stulist[getIndexById(stulist, tr["data-id"])].count = count;
                console.log(stulist);
            }
            /**
             * 根据id从stulist数组寻找索引
             * @param array
             * @param id
             * @returns {*}
             */
            function getIndexById(array, id) {
                let editIndex;
                array.forEach((value, index) => {
                    if (value.id == id) {
                        editIndex = index;
                    }
                });
                return editIndex;
            }
            
            function mouse(event) {
                console.log("mouse");
                let self = event.target;
                let span = self.nextElementSibling;
                let count;
                if (parseInt(span.innerText) <= 0) {
                    count = 0;
                } else {
                    count = parseInt(span.innerText) - 1;
                }
                span.innerText = count;
                let tr = self.parentNode.parentNode;
                stulist[getIndexById(stulist, tr["data-id"])].count = count;
                console.log(stulist);
            }
            
            function clearTable() {
                Array.from(table.tBodies).forEach(value => {
                    while (value.hasChildNodes()) {
                        value.firstChild.remove();
                    }
                })
            }
            
            function getInsertId(array) {
                if (!Array.isArray(array)) {
                    throw new Error("array 必须是一个数组");
                }
                let maxId = array[0].id;
                array.forEach(value => {
                    if (maxId < value.id) {
                        maxId = value.id;
                    }
                });
                return maxId + 1;
            }

            let cb_select_all = document.querySelector("input[name='cb_select_all']");
            cb_select_all.onchange = function (event) {
                let self = event.target;
                console.log(self.checked);
                let cb_selects = table.querySelectorAll("input[name='cb_select']");
                cb_selects.forEach((value, index) => {
                    value.checked = self.checked;
                });
            }


            function delBatch(event) {
                let cb_selects = table.querySelectorAll("input[name='cb_select']");
                cb_selects.forEach((value, index) => {
                    if (value.checked) {
                        // let editTr = value.parentNode.parentNode;
                        // delete stulist[editTr.index];
                        let a=confirm("你确定要删除么");
                        if(a){
                            let id = value.id; //input的id在更新表格时候被设置为数据的id属性
                            stulist.forEach((item, itemIndex) => {
                                if (item.id == id) {
                                    stulist.splice(itemIndex, 1);
                                }
                            });
                        }
                    }
                });
                //刷新表格
                pagination(stulist, 1);
            }
            
            function cancel(event){
                let self=event.target;
                let editTr = self.parentNode.parentNode;
                editTr.remove(); 
            }

            function del(event) {
                let self = event.target;
                let editTr = self.parentNode.parentNode;
                let result = confirm(`是否删除id为${stulist[editTr.index].id}的数据`);
                if (result) {
                    
                    stulist.forEach((value, index) => {
                        if (editTr["data-id"] == value.id) {
                            stulist.splice(index, 1);
                        }
                    });
                    // console.log(stulist);
                    //刷新表格
                    pagination(stulist, 1);
                }
            }
            
            function search() {
                // event.stopPropagation();//终止事件冒泡
                let form = document.forms[0];
                let input_dorm;
                let input_name;
                function a1(){
                    input_dorm =document.getElementById("dormbtnv");
                    return input_dorm;
                }
                function a2(){
                    input_name =document.getElementById("namebtnv");
                    return input_name;
                }
                //输入框搜索
                let namebox= form["name"].value;
                let filterstulist = stulist;
                if (namebox.trim().length > 0) {
                    filterstulist = filterstulist.filter((value, index, array) => {
                        //搜索，精确匹配，模糊匹配
                        // if (name.trim() == value.name.trim()) {
                        //
                        // }
                        //从值中利用indexOf匹配namebox去除空格后内容的下标，如果没有有下标就true，
                        //过滤器对返回值为true的对象删除掉
                        if (value.name.indexOf(namebox.trim()) != -1) {
                            return true;
                        }
                        return false;
                    });
                }
                //如果a2获取得到input_name再比较input_name.innerText.length是否大于0，其余同上
                if (a2()!=null&&input_name.innerText.length > 0) {
                    filterstulist = filterstulist.filter((value, index, array) => {
                        if (value.name.indexOf(input_name.innerText) != -1) {
                            return true;
                        }
                        return false;
                    });
                }
                //同上
                if (a1()!=null&&input_dorm.innerText.length > 0) {
                    console.log(input_dorm.innerText);
                    filterstulist = filterstulist.filter((value, index, array) => {
                        if (value.dorm.indexOf(input_dorm.innerText) != -1) {
                            return true;
                        }
                        return false;
                    });
                }
                //刷新表格
                pagination(filterstulist, 1);
            }
            
            function clear(tag) {
                if (tag instanceof Node) {
                    while (tag.hasChildNodes()) {
                        tag.firstChild.remove();
                    }
                }
            }
            
            function pagination(array, pageNum = 1) {
                if (!Array.isArray(array)) {
                    throw new Error("array 必须是一个数组");
                }
                let total = array.length; //数据总数
            
                let page_total = document.getElementById("page_total");
                page_total.textContent =`一共${total}条记录`;
                let page_select = document.getElementById("page_select");
            
                page_select.onchange=function(event){
                    pageSize=parseInt(page_select.value);
                    pagination(array,pageNum);
                }
            
                let pageCount; //一共有多少页
                if (total % pageSize === 0) {
                    pageCount = Math.floor(total / pageSize);
                } else {
                    pageCount = Math.floor(total / pageSize) + 1;
                }
                // let pageNum = 0;//当前页码
                let firstNum = 1; //首页码1
                let lastNum = pageCount; //尾页码
                let preNum = pageNum - 1; //上一页页码
                if (preNum <= 1) {
                    preNum = 1;
                }
                let nextNum = pageNum + 1; //下一页页码
                if (nextNum >= pageCount) {
                    nextNum = pageCount;
                }
                let pagination_ul = document.querySelector(".pagination");
                clear(pagination_ul);
                let pos = "beforeend";
                //首页
                let li;
                li = document.createElement("li");
                li.className = pageNum == firstNum ? "disabled" : "";
                li.innerHTML = `
            <a href="javascript:void(0);">
            <span>首页</span></a>
            `;
                li.onclick = function () {
                    pagination(array, firstNum);
                };
                pagination_ul.insertAdjacentElement(pos, li);
                //上一页
            
                li = document.createElement("li");
                li.className = pageNum == firstNum ? "disabled" : "";
                li.innerHTML = `
            <a href="javascript:void(0);">
            <span>上一页</span>
            </a>
            `;
                li.onclick = function () {
                    pagination(array, preNum);
                };
                pagination_ul.insertAdjacentElement(pos, li);
                //中间的页码
                for (let i = 1; i <= pageCount; i++) {
                    li = document.createElement("li");
                    li.className = i == pageNum ? "active" : "";
                    li.innerHTML = `
            <a href="javascript:void(0);">
            <span>${i}</span>
            </a>
            `;
                    li.onclick = function () {
                        pagination(array, i);
                    };
                    pagination_ul.insertAdjacentElement(pos, li);
                }
                //下一页
                li = document.createElement("li");
                li.className = pageNum == lastNum ? "disabled" : "";
                li.innerHTML = `
            <a href="javascript:void(0);">
            <span>下一页</span>
            </a>
            `;
                li.onclick = function () {
                    pagination(array, nextNum);
                };
                pagination_ul.insertAdjacentElement(pos, li);
                //尾页
                li = document.createElement("li");
                li.className = pageNum == lastNum ? "disabled" : "";
                li.innerHTML = `
            <a href="javascript:void(0);">
            <span>尾页</span>
            </a>
            `;
                li.onclick = function () {
                    pagination(array, lastNum);
                };
                pagination_ul.insertAdjacentElement(pos, li);
            
                clearTable();
                updateTable(array.filter((value, index) => {
                    return index < pageSize * pageNum && index >= pageSize * (pageNum - 1);
                }));
            }
            pagination(stulist, 1);


              //宿舍下拉菜单
              let ul = document.createElement("ul");
              let ul2 = document.createElement("ul");
              dormarr=dormarr.filter(function (value, index) {
                return dormarr.indexOf(value) == index;
              });
              dormarr.forEach(function (value, index) {
                let li2 = document.createElement("li");
                let a2 = document.createElement("a");
                let dormlist = document.getElementById("dormlist");
                let dormbtn=document.getElementById("dormbtn");
                dormlist.appendChild(ul2);
                ul2.classList.add("dropdown-menu");
                ul2.appendChild(li2);
                li2.appendChild(a2);
                a2.setAttribute("href", "#");
                a2.innerText = `${value}`;
                a2.addEventListener('click', function() {
                    dormbtn.innerHTML=`<span id="dormbtnv">${value}</span>  &nbsp <span class="caret"></span>`
                  })
              })
              //学生下拉菜单
              let ul3 = document.createElement("ul");
              let ul4 = document.createElement("ul");
              stunamearr=stunamearr.filter(function (value, index) {
                return stunamearr.indexOf(value) == index;
              });
              stunamearr.forEach(function (value, index) {
                let li2 = document.createElement("li");
                let a2 = document.createElement("a");
                let stulist = document.getElementById("stulist");
                stulist.appendChild(ul3);
                ul3.classList.add("dropdown-menu");
                ul3.appendChild(li2);
                li2.appendChild(a2);
                a2.setAttribute("href", "#");
                a2.innerText = `${value}`;
                a2.addEventListener('click', function() {
                    namebtn.innerHTML=`<span id="namebtnv">${value}</span>  &nbsp <span class="caret"></span>`
                  })
              })




              let tds = document.querySelectorAll("tbody tr td");
              Array.from(tds).forEach(function (value) {
                //不会覆盖原来的样式 
                value.classList.add("text-center");
              });
              //批量情况
              function clean() {
                let table1 = document.getElementById("table");
                console.log(table1);
                while (table1.hasChildNodes()) {
                  table1.firstChild.remove();
                }
              }

            //   //左导航栏识别
            //   let navlist=document.querySelector(".list-group").children;
            //   let iden=sessionStorage.getItem("identify");
            //   Array.from(navlist).forEach(function(value,index){
            //     let attr=value.getAttribute("data-identify");
            //         if(iden=="stu"&&index==0)
            //         {
            //             value.setAttribute("href","stuW.html")
            //         }else if(iden=="dmm"&&index==0)
            //         {
            //             value.setAttribute("href","dMW.html")
            //         }else if(index==0)
            //         {
            //             value.setAttribute("href","sysW.html")
            //         }
            //         if(iden=="stu"&&attr!="all")
            //         {
            //         value.style.display="none";
            //         }
            //         if(iden=="dmm"&&attr=="sys")
            //         {
            //         value.style.display="none";
            //         }
            //   })


            //   let menusJsonStr = sessionStorage.getItem("menus");
            //   let menus = JSON.parse(menusJsonStr);
            //   let identify = sessionStorage.getItem("identify");
            //   let menusdiv=document.querySelector("#menusdiv");
            //   if(identify==null)
            //   {
            //       window.location="sysW.html"
            //   }
            //   menus.forEach(function(value,index){
            //       let menu_opt=`
            //            <a href="${value.href}" class="list-group-item" ${index==0? 'active' :''}>${value.title}</a>
            //       `;
            //       menusdiv.insertAdjacentHTML("beforeend",menu_opt);
            //   });
              